import React from "react";
import CircleProgressBar from "./CircleProgressBar";
import chart from "./assets/CurveTopAverage.svg";
import './Card.css';

export default function (props) {
    const {
        progress,
        color,
        icon = chart,
    } = props;
    return (
        <div className={'card'} style={{
            background: color,
            borderRadius: '20px',
            padding: '20px',
            color: 'white',
        }}>
            <div style={{
                display: 'inline-block'
            }}>
                <h1>Locations</h1>
                <p style={{
                    marginBottom: '10px'
                }}>35 Lessons</p>
                <CircleProgressBar progress={progress}/>
            </div>
            <div className={'card-icon'} style={{
                display: "inline-flex",
                width: 150,
                height: '100%',
                float: 'right',
                marginRight: 30,
                justifyContent: 'center'
            }}>
                <img style={{
                    width: '100%'
                }} src={icon}/>
            </div>
        </div>
    )
}